<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>欢迎页</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<style>
    .gray-bg{
        background:#f3f3f4;
    }
    .top-panel{
        width:360px;
        height:80px;
        float: left;
        margin-left:50px;
        margin-top: 25px;
    }
    .center-panel{
        width:1590px;
        height:250px;
        margin-left:50px;
    }
    .bottom-panel{
        width:498px;
        height:450px;
        float: left;
        margin-left:50px;
    }
    .glyphicon{
        font-size:35px;
        text-shadow: black 5px 3px 3px;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="panel panel-default top-panel">
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-5">
                        <img src="img/ico_01.png">
                        <!--<span class="glyphicon glyphicon-user" style="color:#00C1B3;"></span>-->
                    </div>
                    <div class="col-sm-2">
                    </div>
                    <div class="col-sm-5">
                        <p>总设备数</p>
                        <p id="allCount" style="font-weight: bolder;font-size:19px"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default top-panel">
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-5">
                        <img src="img/ico_02.png">
                        <!--<span class="glyphicon glyphicon-book" style="color: #1a7bb9;"></span>-->
                    </div>
                    <div class="col-sm-2">
                    </div>
                    <div class="col-sm-5">
                        <p>在线设备数</p>
                        <p id="onlineCount" style="font-weight: bolder;font-size:19px"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default top-panel">
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-5">
                        <img src="img/ico_03.png">
                        <!--<span class="glyphicon glyphicon-euro" style="color:#F27474;"></span>-->
                    </div>
                    <div class="col-sm-2">
                    </div>
                    <div class="col-sm-5">
                        <p>电脑数量</p>
                        <p id="computureCount" style="font-weight: bolder;font-size:19px"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default top-panel">
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-5">
                        <img src="img/ico_04.png">
                        <!--<span class="glyphicon glyphicon-shopping-cart" style="color:#00B83F;"></span>-->
                    </div>
                    <div class="col-sm-2">
                    </div>
                    <div class="col-sm-5">
                        <p>当日新增数</p>
                        <p id="addCount" style="font-weight: bolder;font-size:19px"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="wrapper wrapper-content">
    <div class="row">
        <div class="panel panel-default center-panel ">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>CPU信息</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link"><i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link"><i class="fa fa-times"></i></a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <table class="table table-hover no-margins">
                            <thead>
                            <tr>
                                <th>属性</th>
                                <th>值</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>核心数</td>
                                <td id="cpuNum1"></td>
                            </tr>
                            <tr>
                                <td>用户使用率</td>
                                <td id="used1"></td>
                            </tr>
                            <tr>
                                <td>系统使用率</td>
                                <td id="sys1"></td>
                            </tr>
                            <tr>
                                <td>当前空闲率</td>
                                <td id="free1"></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>内存信息</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            <a class="close-link"><i class="fa fa-times"></i></a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <table class="table table-hover no-margins">
                            <thead>
                            <tr>
                                <th>属性</th>
                                <th>值</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>总内存</td>
                                <td id="total2"></td>
                            </tr>
                            <tr>
                                <td>已用内存</td>
                                <td id="used2"></td>
                            </tr>
                            <tr>
                                <td>剩余内存</td>
                                <td id="free2"></td>
                            </tr>
                            <tr>
                                <td>使用率</td>
                                <td id="usage2"></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>服务器信息</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            <a class="close-link"><i class="fa fa-times"></i></a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <table class="table table-hover margin bottom">
                                    <thead>
                                        <tr>
                                            <th>属性</th>
                                            <th>值</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>服务器名称</td>
                                        <td id="computerName"></td>
                                    </tr>
                                    <tr>
                                        <td>服务器IP</td>
                                        <td id="computerIp"></td>
                                    </tr>
                                    <tr>
                                        <td>操作系统</td>
                                        <td id="osName"></td>
                                    </tr>
                                    <tr>
                                        <td>系统架构</td>
                                        <td id="osArch"></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>磁盘信息</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <div class="row">
                            <div class="col-sm-12">
                                <table class="table table-hover margin bottom">
                                    <thead>
                                        <tr>
                                            <th>名称</th>
                                            <th>总大小</th>
                                            <th>可用大小</th>
                                            <th>已用大小</th>
                                            <th>使用率</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbody1">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="wrapper wrapper-content">
    <div class="row" id="formSearch" name="formSearch">
        <div class="panel panel-default bottom-panel">
            <div class="panel-body" style="width:500px;height:400px;" id="bottom-one">
            </div>
        </div>
        <div class="panel panel-default bottom-panel" >
            <div class="panel-body" style="width:500px;height:400px;" id="bottom-tow">
            </div>
        </div>
        <div class="panel panel-default bottom-panel" >
            <div class="panel-body" style="width:500px;height:400px;" id="bottom-three">
            </div>
        </div>
    </div>
</div>
</body>

<script src="js/jquery.min.js"></script>
<script src="js/openTab.js"></script>

<div th:include="include :: footer"></div>
<script type="text/javascript" src="/js/main.js"></script>
</html>